<template>
	<view class="bg-white" style="height: 100vh;">
		<cu-custom :bgColor="NavBarColor" :isBack="true" backFlag="navigate">
			<block slot="backText">返回</block>
			<block slot="content">出库确认详情</block>
		</cu-custom>
		<view class="tabs">
			<view class="tabItem" v-for="(item, index) in tabList" :key="index" @click="tabSelect(item.id)">
				<text class="itemText" :class="{itemTextCur:index === tabCur}">
					{{ item.title }}
				</text>
			</view>
		</view>
		<!-- 标签页对应的内容 -->
		<block v-if="tabCur === 0">
			<view class="desc">
				<view class="title">物料条码：</view>
				<input placeholder="" name="input" class="input-border" v-model="pdaQueryBarcode" auto-focus
					@input="queryPdaDetail" :focus="materialFocus"></input>
			</view>
			<view class="al-list cu-list">
				<view
					class="message_text bg-white cu-item flex justify-around align-center solid-bottom margin-bottom-sm "
					style="width: 100vw;" v-for="(item,index) in orderList" :key="index" @tap="pdaDetail(item)"
					:class="modalName=='move-box-'+ index?'move-cur':''" @touchstart="ListTouchStart"
					@touchend="ListTouchEnd" :data-target="'move-box-' + index">
		
		
					<view class="input-border" style="font-size: 14px;">
						<view class="container">
							<view class="lable-font-style">所在库位：
							</view>
							<view v-html="item.oriLocation">
							</view>
						</view>
						<view class="container" style="margin-top: 10px;">
							<view class="lable-font-style">物料名称：
							</view>
							<view v-html="item.materialName">
							</view>
							<view class="lable-font-style">物料编号：
							</view>
							<view v-html="item.materialCode">
							</view>
						</view>
						<view class="container">
							<view class="lable-font-style">单位：
							</view>
							<view v-html="item.unit">
							</view>
							<view class="lable-font-style">库存数量：
							</view>
							<view v-html="item.inventoryCount">
							</view>
						</view>
						<view class="container">
							<view class="lable-font-style">计划数量：
							</view>
							<view v-html="item.quantity">
							</view>
							<view class="lable-font-style">状态：
							</view>
							<view v-html="item.status_dictText">
							</view>
						</view>
					</view>
				</view>
			</view>
		</block>
		<block v-else-if="tabCur === 1">
			<view>
				<view class="desc">
					<view class="title">物料条码</view>
					<input placeholder="" name="input" @ class="input-border" v-model="materialBarcode" auto-focus
					@input="handleMaterialInput" :focus="materialFocus"></input>
				</view>
				<view class="desc">
					<view class="title">库位条码</view>
					<input placeholder="" name="input" class="input-border" v-model="locationBarcode"
					@input="handleLocationInput" :focus="locationFocus"></input>
				</view>
				<view v-if="false" class="desc input-border container" style="font-size: 13px;">
					<view>物料编号：
					</view>
					<view v-html="detail.materialCode">
					</view>
					<view>物料编号：
					</view>
					<view v-html="detail.materialCode">
					</view>
				</view>
			
				<view class="title">出库详情：</view>
				<view class="input-border" style="font-size: 13px;">
					<view class="container">
						<view>编号：
						</view>
						<view v-html="outBoundDetail.bussStorageNoticeCode">
						</view>
					</view>
					<view class="container">
						<view>产品编码：
						</view>
						<view v-html="outBoundDetail.materialCode">
						</view>
						<view>批号：
						</view>
						<view v-html="outBoundDetail.materialCode">
						</view>
					</view>
					<view class="container">
						<view>生产日期：
						</view>
						<view v-html="outBoundDetail.oriWarehouse_dictText">
						</view>
						<view>货位：
						</view>
						<view v-html="outBoundDetail.warehouseLocation">
						</view>
					</view>
					<view class="container">
						<view>品名：
						</view>
						<view v-html="outBoundDetail.materialName">
						</view>
						<view>规格：
						</view>
						<view v-html="outBoundDetail.noneSpec">
						</view>
					</view>
					<view class="container">
						<view>入库日期：
						</view>
						<view v-html="outBoundDetail.warehousingDate">
						</view>
						<view>供应商：
						</view>
						<view v-html="outBoundDetail.supplierName">
						</view>
					</view>
				</view>
				<view class="padding flex flex-direction">
					<button class="cu-btn bg-blue lg" @click="submitConfirm(outBoundDetail)">确认</button>
				</view>
				<view class="padding flex flex-direction">
					<button class="cu-btn bg-blue lg" @click="clearBarcode()">清空条码</button>
				</view>
			</view>
		</block>
		
	</view>
</template>

<script>
	import {
		http
	} from '@/common/service/service.js'
	export default {
		data() {
			return {
				NavBarColor: this.NavBarColor,
				erpGoodsId: '',
				materialBarcode: '',
				pdaQueryBarcode: '',
				locationBarcode: '',
				materialFocus:false,
				locationFocus:false,
				modalName: null,
				detail: {},
				outBoundDetail:{},
				goodNumber: null,
				orderList: [],
				flg: true,
				url: {
					barcodeScanCheckOut: '/outorder/tslPdaOutOrder/barcodeScanCheckOut',
					getMaterialById: '/outbound/bussOutboundOrderDetail/getMaterialById',
					queryToConfirmList: '/outorder/tslPdaOutOrder/queryToConfirmList',
					
				},
				tabCur: 0, // 当前tabs下标
				tabList: [{
						id: 0,
						title: '列表'
					},
					{
						id: 1,
						title: '详情'
					},
				],
				tslPdaOutOrder: {},

			}
		},
		// onLoad:function(){
		// 	console.log("this.$Route.query",this.$Route);
		// 	let query = this.$Route.query
		// 	if(query){
		// 		this.annotation = query;
		// 		}
		// },
		onLoad: function(option) {
			const entity = JSON.parse(decodeURIComponent(option.item));
			
			this.detail = entity
			this.getList()
			

		},
		created() {
			console.log("created");
			// this.getById(this.erpGoodsId);
		},

		methods: {
			ListTouchStart(e) {
				this.listTouchStart = e.touches[0].pageX
			},
			
			// ListTouch计算方向
			ListTouchMove(e) {
				this.listTouchDirection = e.touches[0].pageX - this.listTouchStart > 0 ? 'right' : 'left'
			},
			
			// ListTouch计算滚动
			ListTouchEnd(e) {
				if (this.listTouchDirection == 'left') {
					this.modalName = e.currentTarget.dataset.target
				} else {
					this.modalName = null
				}
				this.listTouchDirection = null
			},
			tabSelect(index) {
				if (this.tabCur === index) return
				this.tabCur = index
			},
			handleMaterialInput(event) {
				console.log(this.materialBarcode)
				console.log(this.outBoundDetail.barcode)
				if (this.outBoundDetail.barcode != this.materialBarcode) {
					this.$tip.error('物料条码不匹配')
					return
				}
				console.log('Input changed:', this.materialBarcode);
				this.locationFocus = true;
				// 可以在这里添加更多的逻辑
			},
			handleLocationInput(event) {
				console.log(this.outBoundDetail)
				if (this.outBoundDetail.locationBarcode != this.locationBarcode) {
					this.$tip.error('库位码不匹配')
					return
				}
				console.log('Input changed:', this.locationBarcode);
				// 可以在这里添加更多的逻辑
			},
			clearBarcode() {
				this.materialBarcode = "";
				this.locationBarcode = ""
				this.materialFocus = true;
			},
			getList() {
				console.log(this.detail)
				this.tslPdaOutOrder.topCategoryCode = 4;
				this.tslPdaOutOrder.bussOutboundOrderManagementCode = this.detail.code;
			
				// 根据条码查询移库单数据
				this.$http.post(this.url.queryToConfirmList, this.tslPdaOutOrder).then(res => {
					this.$tip.loaded();
					if (res.data.success) {
			
						this.orderList = res.data.result;
			
					}
				}).catch(() => {
					this.$tip.loaded();
					this.$tip.error('提交失败')
				});
				// this.$http.get(this.url.getToScanNotice).then(res => {
				// 	console.log(res)
				// 	this.$tip.loaded();
				// 	if (res.data.success) {
			
				// 		this.orderList = res.data.result;
			
				// 	}
				// }).catch(() => {
				// 	this.$tip.loaded();
				// 	this.$tip.error('提交失败')
				// });
			},
			pdaDetail(item) {
				console.log("obj" + item)
				console.log(item)
				this.tabCur = 1
				let param = {
					id: item.bussOutboundOrderDetailId
				}
				// 根据条码查询移库单数据
				console.log(param)
				this.$http.post(this.url.getMaterialById, param).then(res => {
					console.log(res)
					this.$tip.loaded();
					if (res.data.success) {
			
						this.outBoundDetail = res.data.result;
						this.outBoundDetail.barcode = item.barcode
						this.outBoundDetail.locationBarcode = item.oriLocation
						this.outBoundDetail.tslPdaOutOrderId = item.id
						this.outBoundDetail.tslPdaOutOrderStatus = item.status
						this.outBoundDetail.quantity = item.quantity
						this.outBoundDetail.bussOutboundOrderManagementCode = item.bussOutboundOrderManagementCode
					}
				}).catch(() => {
					this.$tip.loaded();
					this.$tip.error('提交失败')
				});
			},
			queryPdaDetail(event) {
				this.orderList.forEach(item => {
			
					if (item.barcode === this.pdaQueryBarcode) {
						console.log(item)
						this.pdaDetail(item)
						this.materialBarcode = this.pdaQueryBarcode
					}
				})
			
			},
			submitConfirm(outBoundDetail) {
				console.log(outBoundDetail)

				if (this.materialBarcode != outBoundDetail.barcode) {
					this.$tip.error('物料条码不匹配')
					return
				}
				if (this.locationBarcode != outBoundDetail.locationBarcode) {
					this.$tip.error('库位码不匹配')
					return
				}
				var tslPdaOutOrder = {
					id:outBoundDetail.tslPdaOutOrderId,
					bussOutboundOrderDetailId:outBoundDetail.id,
					status:outBoundDetail.tslPdaOutOrderStatus,
					quantity:outBoundDetail.quantity,
					bussOutboundOrderManagementCode:outBoundDetail.bussOutboundOrderManagementCode
					
				}
				var that = this;
				uni.showModal({
					title: '提示',
					content: '确认进行此操作吗？',
					success: function(res) {
						if (res.confirm) {
							//
							console.log('用户点击确定');

							that.$http.post(that.url.barcodeScanCheckOut, tslPdaOutOrder).then(res => {
								console.log(res)
								this.$tip.loaded();
								if (res.data.success) {
									this.$tip.success(res.data.message)
									// let entity = res.data.result[0];

								} else {

									this.$tip.error(res.data.message)
								}
							}).catch(() => {
								this.$tip.loaded();
								this.$tip.error('提交失败')
							});

							uni.navigateBack({
								delta: 1, //返回层数，2则上上页
								success() {
									uni.$emit('barcode', {
										barcode: pdaDetail.barcode
									})
								},
							});
							// 用户点击了确定，执行相应的逻辑
						} else if (res.cancel) {
							console.log('用户点击取消');
							// 用户点击了取消，执行相应的逻辑
						}
					}
				});

uni.$emit('refreshParentPage', {});
				console.log(detail)
				// this.$http.get(this.url.getById, {
				// 	params: {
				// 		id: this.erpGoodsId
				// 	}
				// }).then(res => {
				// 	//联网成功的回调,隐藏下拉刷新和上拉加载的状态;
				// 	this.erpGoods = res.data.result
				// 	console.log("entity", this.erpGoods)
				// 	//设置列表数据
				// 	if (res.data.success) {
				// 		console.log("res", res.data)

				// 	}


				// })
			},

			numberPlus() {
				if (this.flg) {
					this.goodNumber++
					this.flg = false
				} else {
					this.goodNumber--
					if (this.goodNumber == 0) {
						this.goodNumber = null
					}
					this.flg = true
				}
			}
		}
	}
</script>

<style>
	.input-border {
		border: 1px solid #ccc;
		/* 设置边框为灰色 */
		border-radius: 4px;
		/* 设置圆角 */
		padding: 2px 5px;
		/* 内边距 */
		margin: 4px;
		/* 外边距 */
		width: 98%;
		/* 宽度 */
		box-sizing: border-box;
		/* 防止宽度计算错误 */
	}

	.cu-card.article>.cu-item .content .desc {
		flex: 0.2;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.border-class {
		border: 1px solid #000000;
		border-radius: 5px;
	}

	.container {
		display: grid;
		grid-template-columns: 1.3fr 2fr 1.3fr 2fr;
		/* 将容器分为两列，每列宽度相等 */
	}

	.left-view {
		background-color: red;
	}

	.right-view {
		background-color: blue;
	}
	.topTabBar {
		width: 100%;
		height: 280upx;
		display: flex;
		justify-content: space-around;
		position: fixed;
		top: 45px;
		background-color: #f8f8f8;
	}
	
	.grid {
		width: 20%;
		height: 80upx;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #444;
		font-size: 28upx;
	}
	
	.text {
		height: 76upx;
		display: flex;
		align-items: center;
	}
	
	.active {
		color: #0a79ff;
		border-bottom: solid 4upx #0a79ff;
	}
	
	.content {
		width: 710rpx;
		margin-left: 20rpx;
		margin-top: 20rpx;
		font-size: 36rpx;
		background: #ff0000;
		display: flex;
		flex-direction: row;
		justify-content: center;
	}
	
	.tabs {
		display: flex;
		flex-direction: row;
		justify-content: center;
		font-size: 32rpx;
		background-color: #FFF;
		color: #A9A9A9;
	}
	
	.tabItem {
		width: 250rpx;
		height: 114rpx;
		line-height: 100rpx;
		color: #ffA9A9;
		display: flex;
		flex-direction: row;
		justify-content: center;
		margin-top: 30rpx;
	}
	
	.itemText {
		color: #0000ff;
	}
	
	.itemTextCur {
		color: #F62D5C;
	}

</style>